<template>
    <a-form
      ref="aFormValidate"
      v-model="form"
      :formOption="formOption"
      @onSubmit="onSubmit"
      @onRest="onRest"
      :type="type"
    >
    </a-form>
</template>

<script lang="ts" setup>
import aForm from '@/components/aForm'
const aFormValidate = ref()
const type = ref('add') // 对增改查使用同一个弹框时传入当前开启的状态 add|edit|view 三种状态， 可以对columns数组中的addDisplay|editDisplay|viewDisplay属性进行控制显隐
const form = ref({
  number: 10,
  // radio: '2'
})

const formOption = computed(() => {
  return {
    addBtn: true, // 显隐自带的表单确定按钮 true | false
    resetBtn: true, // 显隐自带的表单重置按钮 true | false
    formLabelWidth: 100, // 表单label宽度 不传默认80
    // formLabelPosition: 'right', // 调整form组件文字位置 left|top|right
    labelWidthSpan: 12, // form组件单个宽度 不传默认8
    // menuPosition: 'center', // 调整按钮位置left|center|right 默认left
    card: false, // 是否开启卡片模式 true | false
    columns: [
      {
        prop: 'name',
        label: '姓名',
        // placeholder: '', // 自定义占位符
        // row: true,
      },
      {
        prop: 'age',
        label: '年龄'
      },
      {
        prop: 'city',
        label: '城市',
        type: 'select',
        // 字典数据value值为字符串
        dicData: [
          { label: '南京', value: '1' },
          { label: '上海', value: '2' }
        ],

      },
      {
        prop: 'radio',
        label: '性别',
        type: 'radio',
        value: '1', // 默认选中的值
        // 字典数据value值为字符串
        dicData: [
          { label: '男', value: '1' },
          { label: '女', value: '2' }
        ]
      },
      {
        prop: 'switch',
        label: '类型',
        type: 'switch',
        activeText: '开',
        inactiveText: '关'
      },
      {
        label: '日期时间区间',
        prop: 'datetimerange',
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        type: 'datetimerange',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间'
      },
      {
        prop: 'textarea',
        label: '多文本框',
        type: 'textarea',
        showWordLimit: true, // 显示输入限制
        maxlength: 30, // 最大输入限制
        rows: 5, // type为textarea类型rows生效
        display: !form.value?.city || form.value?.city == '1' ? 'block' : 'none'
      }
    ]
  }
})

watch(() => form.value.city, (val) => {
  if (val !== '1') {
    form.value.textarea = ''
  }
})

// 获取表单值的方法
function onSubmit() {
  console.log('form', form.value)
}

// 重置表单值的方法
function onRest() {
  aFormValidate.value.ruleFormRefState.resetFields()
}
</script>
